<template>
  <view class="login-container">
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <button class="btn-login" @click="getUserInfo">一键登录</button>
    <view class="info">
      登录后享更多权益
    </view>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'
  import { getToken } from '@/api/user.js'
  export default {
    name:"my-login",
    data() {
      return {
        
      };
    },
    methods:{
      ...mapMutations('user',['UPDATEUSERINFO','UPDATETOKEN']),
      getUserInfo() {
        // uni.getUserProfile 已经弃用  会返回灰白头像 (模拟器老版本可以获取到 手机获取不到)
        // https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01?highLine=%25E5%25BE%25AE%25E4%25BF%25A1%25E8%258E%25B7%25E5%258F%2596%25E7%2594%25A8%25E6%2588%25B7
      uni.getUserProfile({
        desc: '测试用途，仅获取本人账号信息',
        success: (res) =>{
          console.log(res);
          this.UPDATEUSERINFO(res.userInfo)
          this.getToken(res)
         },
         fail() {
           uni.$showMsg('取消授权')
         }
         })
    },
   async getToken(info) {
      const [err,res] = await uni.login().catch(err =>err)
      console.log(err,res);
      if(err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败')
      const query = {
        code:res.code,
        encryptedData:info.encryptedData,
        iv:info.iv,
        rawData:info.rawData,
        signature:info.signature
      }
      // 获取token
      const { data } = await getToken(query)
      console.log(data);
      // if(data.meta.status !== 200) return uni.$showMsg('登录失败')
      if(data.meta.status !== 200)  {
      uni.$showMsg('接口失效传入的假token')
      this.UPDATETOKEN('Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo')
      }else {
        this.UPDATETOKEN(data.message.token)
      }
    }
  },
  }
</script>

<style lang="scss">
.login-container {
  padding-top: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f5f5f5;
  overflow: hidden;
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    transform: translateY(50%);
  }
  .btn-login {
    width: 80%;
    background-color: #c00000;
    height: 40px;
    margin-top: 20rpx;
    line-height: 40px;
    border-radius: 40px;
    color: #fff;
  }
  .info {
    color: #999;
    font-size: 15px;
    margin-top: 30rpx;
  }
}
</style>